<template>
    <div class="employee">
        <h5>
            <span>员工管理</span>
            <span class="add my-background" @click="addClick(0)">创建角色</span>
        </h5>
        <div class="employee-top">
            <div class="search-list">
                <span>角色名称：</span>
                <el-select v-model="search.role" placeholder="全部">
                    <el-option v-for="item in roleOptions"  :key="item.id"  :label="item.name"  :value="item.id"></el-option>
                </el-select>
            </div>
            <div class="search-list">
                <span>业务名称：</span>
                <el-select v-model="search.business" placeholder="全部">
                    <el-option v-for="item in businessOptions"  :key="item.id"  :label="item.name"  :value="item.id"></el-option>
                </el-select>
            </div>
            <el-button plain type="primary" @click="searchClick">筛选</el-button>
        </div>
        <div class="table-box">
			<div class="table-top">
				<span style="color:rgb(70 126 251);" @click="toggleSelection">批量删除</span>
                <span style="color:#999;"></span>
			</div>
            <div class="mytable">
                <el-table ref="multipleTable"  @selection-change="handleSelectionChange" max-height="500px"  :data="employeeData" border style="width: 100%" fit >
                    <el-table-column  type="selection"  width="40"></el-table-column>
                    <el-table-column  prop="brandObjname" label="角色名称"></el-table-column>
                    <el-table-column  prop="title" label="业务名称"></el-table-column>
                    <el-table-column class-name="time"  label="创建时间" min-width="90">
                        <template  slot-scope="scope">
                            <span>{{scope.row.createTime[0]}}</span>
                            <span>{{scope.row.createTime[1]}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column  label="操作" fixed='right'>
                        <template  slot-scope="scope">
                            <el-button  type="text" size="small" @click="editClick(scope.row)" style="margin-right: 10px;margin-left: 0px;">详情</el-button>
                            <el-button  type="text" size="small" @click="editClick(scope.row)" style="margin-right: 10px;margin-left: 0px;">修改</el-button>
                            <el-button  type="text" size="small" @click="handleClick(scope.row)" style="margin-right: 10px;margin-left: 0px;">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <div class="mask" v-show="masknum">
            <div class="content">
                <p class="content-top">
                    <span>创建权限</span>
                    <span @click="cancelClick"><img src="../assets/img/error.png" alt=""></span>
                </p>
                <ul class="content-items">
                    <li class="item">
                        <span>角色名称:</span>
                        <el-input v-model="addData.name" placeholder="请输入内容" @blur="selectBular()" @focus="selectfocus()"></el-input>
                    </li>
                    <li class="item">
                        <span>业务权限:</span>
                        <el-radio-group v-model="addData.business">
                            <el-radio :label="1">外卖</el-radio>
                            <el-radio :label="2">酒店</el-radio>
                            <el-radio :label="3">直播</el-radio>
                        </el-radio-group>
                    </li>
                    <li class="item">
                        <span>端口:</span>
						<el-select v-model="addData.port" placeholder="请选择" @blur="selectBular" @focus="selectfocus">
							<el-option v-for="item in portOptions"  :key="item.id"  :label="item.name"  :value="item.id"></el-option>
						</el-select>
                    </li>
                    <li class="item itemtop">
                        <span>功能权限:</span>
                        <div>
                            <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
                            <el-checkbox-group v-model="addData.checkedCities" @change="handleCheckedCitiesChange">
                                <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
                            </el-checkbox-group>
                        </div>
                    </li>
                </ul>
                <div class="content-bottom">
                    <span @click="cancelClick">取消</span>
                    <span @click="uploadClick">确定</span>
                </div>
            </div>
        </div>
        <el-pagination class="pag"  @size-change="handleSizeChange"  @current-change="handleCurrentChange"  :current-page="currentPage4"  :page-sizes="[5, 10, 15, 20]"  :page-size="5"  layout="total, sizes, prev, pager, next, jumper"  :total=total></el-pagination>
    </div>
</template>

<script>
const cityOptions = ['上海', '北京', '广州', '深圳'];
export default {
    data(){
        return{
            masknum:false,
            openNum:0,
            search:{//筛选条件
                role:'',
                business:''
            },
            roleOptions:[//角色选择
                {id:'1',name:'酒店客服'},
                {id:'2',name:'外卖客服'},
                {id:'3',name:'酒店主管'}
            ],
            businessOptions:[//状态
                {id:'0',name:'全部'},
                {id:'1',name:'酒店'},
                {id:'2',name:'外卖'},
                {id:'3',name:'直播'}
            ],
            portOptions:[
                {id:'0',name:'全部'},
                {id:'1',name:'App'},
                {id:'2',name:'PC'},

            ],
            valueLevel1:'',
            employeeData: [],//员工数据
            idList:[],//删除id列表
            id:'',//编辑页面id
            addData:{//添加数据
                name:"",//姓名
                business:"",//业务权限
                port:"",//端口
                checkedCities:['上海', '北京'],//功能权限
            },
            checkAll: false,
            cities: cityOptions,
            isIndeterminate: true,
            //分页
            total:102,
            currentPage4: '',
        }
    },
    mounted(){
        this.getemployeeData()
    },
    methods:{
        handleCheckAllChange(val) {
            this.addData.checkedCities = val ? cityOptions : [];
            this.isIndeterminate = false;
        },
        handleCheckedCitiesChange(value) {
            let checkedCount = value.length;
            this.checkAll = checkedCount === this.cities.length;
            this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
        },
        //筛选
        searchClick(){

        },
        open(text) {
            this.$alert(text, '提示', {
                confirmButtonText: '确定',
            });
        },
        //获取问题列表
        getemployeeData(){
			var url='/operate/poster/selectAll'
			if(this.valueLevel1){
				url='/operate/poster/selectAll?positiontype='+this.valueLevel1
			}
            this.axios({
                url:url,
                method:'get',
                headers: {'Content-Type': 'application/json'}
            }).then(res=>{
                this.employeeData=res.data.data.records
				this.employeeData.forEach(e => {
					e.createTime=e.createTime.split(/[T.]/g)
				});
            })
        },
        //添加
        addClick(row){
			this.masknum=true
        },
        //删除
        handleClick(row){
            this.axios.delete('/operate/poster/delete?idList='+row.id).then(res=>{
                this.getemployeeData()
            })
        },
        //编辑
        editClick(row){
            this.masknum=true
            this.openNum=1
            this.id=row.id
            this.addpositiontype=row.positiontype
            this.addjumptype=row.jumptype
            this.addtype=row.type
            this.addtitle=row.title
            this.addsort=row.sort
            this.addurl=row.url
            this.adddetailid=row.detailid
            this.fileUpUrlList=row.image
        },
        //批量删除
        toggleSelection() {
            this.axios.delete('/operate/poster/delete?idList='+this.idList).then(res=>{
                this.getemployeeData()
            })
        },
        //多选的数据列表
        handleSelectionChange(val) {
            this.idList=[]
            val.forEach(e => {
                this.idList.push(e.id)
            });
        },
        //取消
        cancelClick(){
            this.masknum=false
            this.id=''
            this.addData={
                role:'',
                region:"",
                superior:"",
                name:"",
                phone:"",
                upwd:"",
            }
        },
        //上传
        uploadClick(){
            if(this.addpositiontype){
                var poster={
                    "createTime": "",
                    "detailid": 0,
                    "id": 0,
                    "image": "",
                    "jumptype": 0,
                    "positiontype": 0,
                    "showState": 0,
                    "sort": 0,
                    "title": "",
                    "type": 0,
                    "url": ""
                }
                poster.detailid=this.adddetailid
                poster.jumptype=this.addjumptype
                poster.positiontype=this.addpositiontype
                poster.sort=this.addsort
                poster.title=this.addtitle
                poster.type=this.addtype
                poster.url=this.addurl
                if(this.id){
                    poster.id=this.id
                    this.axios({
                        url:'/operate/poster/update',
                        method:'put',
                        data:JSON.stringify(poster),
                        headers: {'Content-Type': 'application/json;charset=UTF-8'}
                    }).then(res=>{
                        this.cancelClick()
                        this.getemployeeData()
                    })
                }else{
                    this.axios({
                        url:'/operate/poster/insert',
                        method:'post',
                        data:JSON.stringify(poster),
                        headers: {'Content-Type': 'application/json;charset=UTF-8'}
                    }).then(res=>{
                        this.cancelClick()
                        console.log(res.data)
                        this.getemployeeData()
                    })
                }
            }
        },
        //分页
        handleSizeChange(val) {
        },
        handleCurrentChange(val) {
        }
    },
    watch:{
        valueLevel1(){
            this.getemployeeData()
        },
        addjumptype(){
            if(!this.openNum){
                this.addtype=''
                this.adddetailid=''
                this.addurl=''
            }else{
                this.openNum=0
            }
        },
        //正则验证排序
        addsort(){
            var reg=/^[0-9]*$/
            if(!reg.test(this.addsort)){
                this.open('请输入数字')
                this.addsort=''
            }
        },
    }
}
</script>

<style scoped>
.employee{
    min-height: calc(100vh - 100px);
    position: relative;
}
.employee>h5{
    display: flex;
    justify-content: space-between;
}
.employee>h5 .add{
    display: inline-block;
    font-size: 15px;
    height: 30px;
    padding: 0 10px;
    line-height: 30px;
    text-align: center;
    border-radius: 2px;
    color: #fff;
}
.table-box{
    margin-top: 35px;
}
.table-box .table-top{
    font-size:14px;
    display: flex;
    justify-content: space-between;
    margin-bottom:15px;
    padding:2px;
}
/* .mytable{
    height: calc(100vh - 400px);
	overflow: auto;
} */
table .time span{
	display: inline-block;
	margin: 0 2px;
}
table .img-box{
	width: 100%;
}
.cell img{
	width: 100%;
}
.employee-top{
    margin-top: 50px;
    display: flex;
}
.employee-top .search-list{
    margin-right: 20px;
}
.title{
    display: inline-block;
    text-align: right;
    /* width: 90px; */
    margin-right: 15px;
}
.btn{
    height: 38px;
    line-height: 36px;
    margin-left: 30px;
    font-size: 15px;
}
.button{
    margin-left:40px;
    border:0;
    padding:0 25px;
    height: 37px;
    line-height: 37px;
}
.employee-top input{
    width: 210px;
    padding-left: 15px;
}
.employee-top input::-webkit-input-placeholder {
    color: #c5c9cf;
    font-size: 14px;
}
</style>

<style scoped>
/* 遮罩层 */
.mask{
    width: 100vw;
    height: 100vh;
    /* color: #555; */
    background: rgba(51, 51, 51, 0.692);
    position: fixed;
    z-index: 99;
    top: 0;
    left: 0;
}
.mask .content{
    width: 450px;
    height: 500px;
    background: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    padding: 30PX;
    border-radius: 4px;
}
.mask .content-top{
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #ddd;
    padding-bottom: 10px;
}
.mask .content-top img{
    width: 25px;
}
.content-items{
    margin: 20px;
}
.content-items .item{
    margin:12px 10px;
	display: flex;
    align-items: center;
}
.content-items .itemtop{
    align-items: flex-start;
}
.content-items .item span:first-child{
    display: inline-block;
    width: 100px;
}
/* 按钮 */
.content-bottom{
    padding-top: 20px;
    text-align: center;
    border-top: 1px solid #ddd;
    position: absolute;
    width: calc(100% - 60px);
    bottom: 30px;
}
.content-bottom span{
    border-radius: 2px;
    padding: 5px 15px;
    border: 1px solid #ddd;
    color: #444;
}
.content-bottom span:last-child{
    color: #fff;
    /* background: #dfe7f0 ; */
    background: #1890FF ;
    border: 1px solid #1890FF;
    margin-left: 18px;

}
</style>

<style>
.employee .upload-demo{
    display: flex;
}
.employee .upload-demo .el-upload--picture-card{
	width: 90px;
	height: 90px;
	line-height: 90px;
    margin-left: 10px;
}
.employee .item-img-box {
    position: relative;
}
.employee .item-img-box img{
	height: 90px;
}
.employee .item-img-box span{
    position: absolute;
    display: inline-block;
    width: 15px;
    height: 15px;
    line-height: 15px;
    text-align: center;
    background: #fff;
    border-radius: 50%;
    font-size: 13px;
    top: 2px;
    right: 2px;
    cursor:pointer;
}
.employee .upload-demo .el-upload-list--picture-card .el-upload-list__item{
	width: 100%;
	height: 90px;
}
.employee .el-select{
    margin-right: 10px;
}
.employee label{
    margin-bottom: 0;
}
.employee .el-input{
    width: 180px;
}
.employee .el-checkbox{
    display: block;
    margin-bottom: 5px;
}
</style>